<template>
    <el-dialog @open="open" v-model="isOpen" :title="props.openType==='add'?'添加会员等级':'修改会员等级'" @close="close" style="width: 30%">
        <el-form ref="dataForm" :rules="rules" :model="form" align="center" label-width="120px">
            <el-form-item label="等级名称" prop="name">
                <el-input :disabled ="props.openType==='edit'"  v-model="form.name"/>
            </el-form-item>
            <el-form-item label="所需成长值" prop="growthPoint">
                <el-input-number v-model="form.growthPoint" :min="0"/>
            </el-form-item>
            <el-form-item label="默认等级" prop="defaultStatus">
                <el-switch
                        v-model="form.defaultStatus"
                        inline-prompt
                        :active-value="1"
                        :inactive-value="0"
                        active-text="是"
                        inactive-text="否"
                        class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                />
            </el-form-item>
            <el-form-item label="免运费标准" prop="freeFreightPoint">
                <el-input-number v-model="form.freeFreightPoint" :min="0"/>
            </el-form-item>
            <el-form-item label="评价获取的成长值" prop="commentGrowthPoint">
                <el-input-number v-model="form.commentGrowthPoint" :min="0"/>
            </el-form-item>
            <el-form-item label="是否有免邮特权" prop="priviledgeFreeFreight">
                <el-switch
                        v-model="form.priviledgeFreeFreight"
                        inline-prompt
                        :active-value="1"
                        :inactive-value="0"
                        active-text="是"
                        inactive-text="否"
                        class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                />
            </el-form-item>
            <el-form-item label="是否有会员价格特权" prop="priviledgeMemberPrice">
                <el-switch
                        v-model="form.priviledgeMemberPrice"
                        inline-prompt
                        :active-value="1"
                        :inactive-value="0"
                        active-text="是"
                        inactive-text="否"
                        class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                />
            </el-form-item>
            <el-form-item label="是否有生日特权" prop="priviledgeBirthday">
                <el-switch
                        v-model="form.priviledgeBirthday"
                        inline-prompt
                        :active-value="1"
                        :inactive-value="0"
                        active-text="是"
                        inactive-text="否"
                        class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                />
            </el-form-item>
            <el-form-item label="备注" prop="note">
                <el-input v-model="form.note" placeholder="备注"/>
            </el-form-item>
            <el-form-item>
                <el-button v-show='props.openType==="add"' type="primary" activity  @click="addUmsMemberLevel">添加</el-button>
                <el-button v-show="props.openType==='edit'" type="primary" activity  @click="updateUmsMemberLevel">更新</el-button>
                <el-button @click="close" type="warning" activity >取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
    import {ref,reactive} from 'vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    const  emits = defineEmits(['close','reload'])

    let dataForm = ref(null)
    let props = defineProps(['openType','id'])
    let form = reactive({})
    let isOpen = ref(false)
    defineExpose({isOpen})

    const rules = reactive({
            name: [{required: true,message: '请输入等级名称', trigger: 'blur'},],
            growthPoint: [{required: true,message: '请输入等级需要的成长值', trigger: 'blur'},],
            freeFreightPoint: [{required: true,message: '请输入免运费标准', trigger: 'blur'},],
            commentGrowthPoint: [{required: true,message: '请输入每次评价获取的成长值', trigger: 'blur'},],
            note: [{required: true,message: '请输入备注', trigger: 'blur'},],
    })
    function open(){
        if(props.openType==='edit'){
            request.get(`/api/umsMemberLevel/getUmsMemberLevelById/${props.id}`).then(resp => {
                for(let key in resp){
                    form[key] = resp[key]
                }
            })
        }else if(props.openType==="add"){
            for(let key in form){
                delete form[key]
            }
        }
    }

    function close(){
        emits("close")
        dataForm.value.resetFields()//重置表单校验
    }

    function addUmsMemberLevel(){

        dataForm.value.validate((valid, fields)=> {
            if (valid) {
                request.post("/api/umsMemberLevel/add",form).then(resp => {
                    emits("close")
                    emits("reload")
                    ElMessage({message: '添加成功！',type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
    function updateUmsMemberLevel(){

        dataForm.value.validate((valid, fields)=> {
            if (valid) {
                request.post("/api/umsMemberLevel/update",form).then(resp => {
                    emits("close")
                    emits("reload")
                    ElMessage({message: '修改成功！',type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
</script>

<style scoped>

</style>